<template>
	<view>

		<!-- 照片选项卡 -->
		<view class="materialList_con">
			
			<view class="materialItem" @click="selectType(1)">
				<view class="materialType">
					<image src="/static/photoType2.png" mode=""></image>
					<view class="materialName">记账照片</view>
				</view>
				<view class="materialDesc">照片数量：</view>
				<view class="materialNum">
					{{extendData.typeNum1}}<text>张</text>
				</view>
				<view class="materialSelect" v-if="typeNav==1">
					<u-icon name="checkbox-mark" color="#fff" size="22"></u-icon>
				</view>
			</view>
			<view class="materialItem"  @click="selectType(2)">
				<view class="materialType">
					<image src="/static/photoType3.png" mode=""></image>
					<view class="materialName">日志照片</view>
				</view>
				<view class="materialDesc">照片数量：</view>
				<view class="materialNum">
					{{extendData.typeNum2}}<text>张</text>
				</view>
				<view class="materialSelect" v-if="typeNav==2">
					<u-icon name="checkbox-mark" color="#fff" size="22"></u-icon>
				</view>
			</view>
			
			<view class="materialItem"  @click="selectType(3)">
				<view class="materialType">
					<image src="/static/photoType3.png" mode=""></image>
					<view class="materialName">安心记</view>
				</view>
				<view class="materialDesc">照片数量：</view>
				<view class="materialNum">
					{{extendData.typeNum3}}<text>张</text>
				</view>
				<view class="materialSelect" v-if="typeNav==3">
					<u-icon name="checkbox-mark" color="#fff" size="22"></u-icon>
				</view>
			</view>
		</view>

		<!-- 照片列表 -->
		<view class="photoList_con">
			<view class="photoWrap" v-for="(item,index) in listData" :key="index">
				<view class="photoHead">
					{{index}}<text> | 共{{item.length}}张</text>
				</view>
				<view class="photoList">
					<view class="photoItem" v-for="(imgItem,imgIndex) in item" :key="imgIndex" @click="previewImage(imgItem.url_all)">
						<img :src="imgItem.url_all" alt="">
					</view>
				</view>
			</view>
		</view>

		<!-- 底部 -->
		<!-- <u-gap height="152" bg-color="#fff"></u-gap>
		<view class="handlePost_con handleFixed">
			<view class="completeBtn" @click="addSubmit">上传照片</view>
		</view> -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeNav:1,
				defaultWorksite: JSON.parse(uni.getStorageSync('defaultWorksite')),
				listData:[],
				extendData:{},
			}
		},
		onLoad(){
			this.getListData();
		},
		methods: {
			
			
			selectType(indexData){
				var _this=this;
				_this.typeNav=indexData;
				_this.getListData();
			},
			
			
			getListData(){
				var _this=this;
				_this.listData=[];
				_this.$u.get('/api/project.salary/getProjectImg', {
					type: _this.typeNav,
					project_id:_this.defaultWorksite.project_id
				}).then(res => {
					console.log("==获取数据辞典信息==");
					console.log(res)
					_this.listData=res.data;
					_this.extendData=res.extend;
				}).catch(res => {
					console.log(res);
				})
			},
			
			previewImage(imgUrl) {
				var imgList=[];
				imgList[0]=imgUrl;
				var currentIndex=0;
				//uniapp预览轮播图
				uni.previewImage({
					current: currentIndex, //预览图片的下标
					urls:imgList //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	// 照片选项卡
	.materialList_con {
		padding: 30rpx 30rpx 0;
		background-color: $uni-color-white;
		overflow: hidden;
		display: flex;
		flex-wrap: wrap;
	}

	.materialItem {
		width: 216rpx;
		height: 216rpx;
		padding: 50rpx 20rpx;
		text-align: center;
		background: $uni-color-white;
		border: 2rpx solid #f0f0f0;
		border-radius: 10rpx;
		box-sizing: border-box;
		overflow: hidden;
		margin-bottom: 30rpx;
		margin-right: 20rpx;
		position: relative;
	}

	.materialItem:nth-child(3n) {
		margin-right: 0;
	}

	.materialItem.active {
		border: 2rpx solid $uni-color-active;
	}
	
	.materialType{
		display: flex;
		align-items: center;
	}

	.materialType image {
		width: 32rpx;
		height: 32rpx;
	}

	.materialName {
		font-size: 32rpx;
		font-weight: bold;
		color: $uni-color;
		margin-left: 10rpx;
	}
	
	.materialDesc{
		font-size: 24rpx;
		color: $uni-color-text;
		text-align: center;
		margin-top: 20rpx;
	}
	
	.materialNum{
		font-size: 32rpx;
		text-align: right;
		margin-top: 20rpx;
	}
	
	.materialNum text{
		font-size: 24rpx;
	}

	.materialSelect {
		position: absolute;
		top: 0;
		right: 0;
		border-radius: 0 10rpx 0 30rpx;
		background-color: #327FE8;
		width: 40rpx;
		height: 40rpx;
		text-align: center;
	}

	// 照片列表
	.photoList_con {
		padding: 0 30rpx;
		overflow: hidden;
	}

	.photoHead {
		padding: 30rpx 0;
		font-size: 28rpx;
		font-weight: bold;
		color: $uni-color;
	}

	.photoHead text {
		font-size: 28rpx;
		font-weight: bold;
		color: $uni-color;
	}

	.photoList {
		padding: 30rpx 30rpx 0;
		background-color: #fff;
		overflow: hidden;
		display: flex;
		flex-wrap: wrap;
	}

	.photoItem {
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
		overflow: hidden;
		margin-right: 20rpx;
		margin-bottom: 30rpx;
	}

	.photoItem:nth-child(3n) {
		margin-right: 0;
	}

	.photoItem image {
		width: 100%;
		height: 100%;
	}
</style>
